<template>
  <div id="expand">
    <div style="width: 50px;height:100vh;float: left;">
      <img :src="dot_left_2" style="width: 6px; margin-top: 28vh;  margin-left: 2.2vh;"/>
    </div>
    <div style="width: calc(100% - 100px); height:100vh;float: left">
      <div style="width: 100%;height: 50px;">
        <img :src="dot_left" style="height: 15px; margin-top: 1.3vh; margin-left: 33vh;"/>
        <img :src="dot_right"
             style="height: 15px; margin-top: 1.3vh; margin-right: 32vh; float: right;"/>
      </div>
      <div style="width: 100%;height: calc(100% - 50px)">
        <div style="float: left;width: 22%;height: 100%;">
          <img :src="logo" style="    width: 70px; margin-top: -1vh;"/>
          <div class="left-table1">
            <div class="left-head1">
              <img :src="dot_flash"
                   style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
            </div>
            <div class="left-body1">
              <div style="width: 100%;height: 70%">
                <div class="right-table-item" style="width: 40%;    margin-top: 20px;">
                <span class="right-table-item-name2">
                  总户数
                </span>
                  <span class="right-table-item-value">
                  12<span class="left-table-item-i">户</span>
                </span>
                </div>
                <div class="right-table-item"
                     style="width: 60%; justify-content: left;   margin-top: 20px;">
                <span class="right-table-item-name2" style="text-align: left">
                  本年签约
                </span>
                  <div style="width: 100%;text-align: left">
                    <span class="right-table-item-value">
                      12<span class="left-table-item-i">户</span>
                    </span>
                    <span class="right-table-item-value" style="    margin-left: 15px;">
                     274.17<span class="left-table-item-i">万元</span>
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="left-table2">
            <div class="left-head2">
              <img :src="dot_flash"
                   style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
            </div>
            <div class="left-body2">
              <div style="width: 100%;height: 35%">
                <div class="left-table-item2">
                <span class="left-table-item-left right-table-item-name2 ">
                  拓展
                </span>
                  <span class="left-table-item-left right-table-item-value ">
                  12<span class="left-table-item-i">户</span>
                </span>
                </div>
                <div class="left-table-item2">
                <span class="right-table-item-name2">
                  拜访次数
                </span>
                  <span class="right-table-item-value">
                  12<span class="left-table-item-i">次</span>
                </span>
                </div>
                <div class="left-table-item2">
                <span class="right-table-item-name2" style="text-align: left">
                  流失
                </span>
                  <span class="right-table-item-value" style="text-align: left">
                  12<span class="left-table-item-i">份</span>
                </span>
                </div>
              </div>
              <div style="height: 65%; width: 100%">
                <Echart :options="echartsOption" :height="100"/>
              </div>
            </div>
          </div>
          <div class="left-table3">
            <div class="left-head3">
              <img :src="dot_flash"
                   style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
            </div>
            <div class="left-body3">
              <div style="width: 100%;height: 35%">
                <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  新签户数
                </span>
                  <span class="right-table-item-value left-table-item-left">
                  12<span class="left-table-item-i">户</span>
                </span>
                </div>
                <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  环比
                </span>
                  <span class="right-table-item-value left-table-item-left">
                  12<span class="left-table-item-i">%</span>
                </span>
                </div>
                <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  签约合同额
                </span>
                  <span class="right-table-item-value left-table-item-left">
                  12<span class="left-table-item-i">万元</span>
                </span>
                </div>
              </div>
              <div style="height: 65%; width: 100%">
                <Echart :options="echartsOption2" :height="100"/>
              </div>
            </div>
          </div>
          <div class="left-table4">
            <div class="left-head4">
              <img :src="dot_flash"
                   style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
            </div>
            <div class="left-body4">
              <div style="width: 100%;height: 70%">
                <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left"
                      style="margin-left: 12px;">
                  本月到期收款
                </span>
                  <span class="right-table-item-value left-table-item-left">
                  12<span class="left-table-item-i">万元</span>
                </span>
                </div>
                <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  到期续签
                </span>
                  <span class="right-table-item-value left-table-item-left">
                  12<span class="left-table-item-i">份</span>
                </span>
                </div>
                <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left" style="text-align: left">
                  逾期未续签
                </span>
                  <span class="right-table-item-value left-table-item-left"
                        style="text-align: left">
                  12<span class="left-table-item-i">份</span>
                </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--    中间地图    -->
        <div style="float: left;width: 51%;height: calc(100% - 22px); margin-top: 22px;">
          <div style="height: 95%; width: 100%;    overflow: hidden;">
            <div  style="height: 115%; width: 110%">
              <BaiduMap
                :ak="bmapAk"
                :center="mapCenter"
                :zoom="zoomLevel"
                :points="markerPoints"
              />
            </div>
            <!--            <Echart :options="echartsOptionMap" :height="600" />-->

          </div>
        </div>
        <div style="float: left;width: 27%;height: 100%;">
          <div style="height: 4vh;    margin-top: -7px;width: 100%;">
            <div style="margin-left: 20px;" class="right-top">
              全屏切换
            </div>
            <div style="margin-left: 12px;" class="right-top">
              关闭
            </div>
            <div style="margin-left: 12px;color: rgb(192, 228, 255); font-size: 11px"
                 class="right-top">
              三源电力（辽宁）有限公司
              <CaretBottom style="width: 1em; height: 1em;"/>
            </div>
            <div style="margin-left: 12px;color: rgb(192, 228, 255); font-size: 11px"
                 class="right-top">
              2025-07
              <CaretBottom style="width: 1em; height: 1em; "/>
            </div>
            <!--            <el-date-picker-->
            <!--              v-model="value1"-->
            <!--              type="date"-->
            <!--              :default-value="new Date()"-->
            <!--            />-->
          </div>

          <div class="left-table5">
            <div class="left-head5">
              <div @click="getList" class="right-button">拓展记录清单</div>
              <img :src="dot_flash"
                   style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
              <div style="color:#fafafa;    font-size: 10px;margin-left: 35%;  line-height: 3vh;">
                (共{{allUserExpand.length}}条)
              </div>
            </div>
            <div v-if="showRightDeteil" class="left-body5"
                 style="width: 100%;height: 100%;padding: 8px;">
              <div style="width: 100%;height: 20px; ">
                <el-icon style="cursor:pointer; float: left" @click="showRightDeteil = false">
                  <Back/>
                </el-icon>
                <span class="right-table-item-name">
                  {{ visitName }} 拓展明细
                </span>
              </div>
              <div class="right-detail-item" v-for="(item,it) in visitCustomer" :key="it">
                <div class="right-detail-item-div">
                  <div class="right-detail-item-div-title">
                    <span class="right-detail-item-div-no">{{ item.value }}</span>
                    <span style="font-size: 10px;color: #8aabca;margin-left: 5px">{{
                        item.unit
                      }}</span>
                  </div>
                  <div class="right-detail-item-div-title" style="    line-height: 8px;">
                    <span style="color:#c0e4ff;font-size: 12px">{{ item.name }}</span>
                  </div>
                </div>
              </div>
              <div style="width: 100%;height: 8px;float: left"></div>
              <div style="width: 100%;height: calc(66%);overflow-y: auto">
                <div style="height: 100px; width: 100%;float: left;" v-for="(item,i) in expandRecordPage" :key="i">
                  <div style="border-right: solid #8aabca;width: 30%;height: 100%;float:left;">
                    <el-icon style="float: right; margin-right: -0.57em;">
                      <ChatDotRound style="color: #89ecfd;background-color: rgba(9,37,62,1);"/>
                    </el-icon>
                    <span :class="item.expandStatus == '拓展中' ? 'expendC1' :item.expandStatus == '客户维护' ? 'expendC2' :'expendC3'" style="  font-size: 11px;
    padding: 2px 4px;
    border-radius: 4px;
    float: right;
    margin-right: 10px;">
                   {{item.expandStatus }}
                  </span>
                    <span style="font-size: 11px;
    color: rgb(250, 250, 250);
    margin-right: 20px;
    margin-top: 4px;
    float: right;">{{ item.createTimeStr }}</span>
                  </div>
                  <div style=";width: 70%;height: 100% ;float:left;">
                    <div
                      style="width: 100%;font-size: 12px; text-align: left;color: #fafafa;padding-left: 16px;">

                      <span style="height: 14px;line-height: 14px;">{{ item.interviewee }}</span>
                      <img :src="expMarker1" width="8px" style="    padding-top: 3px;  margin-left: 4px;"/>
                    </div>
                    <div style="width: 100%;padding-left: 16px;">
                    <span style="border-radius: 10px;border: solid #1fc6ff 1px; padding: 1px 4px; font-size: 9px; text-align: left;color: #1fc6ff;">
                      <dict-span
                        :type="DICT_TYPE.CRM_CUSTOMER_LEVEL"
                        :value="item.customerLevel"
                      />
                    </span>
                    </div>
                    <div style="width: 100%;padding-left: 16px;">
                    <span style="font-size: 11px; text-align: left;color: #009dff;">
                    累计第{{item.bfcs}}次拜访</span>
                    </div>
                    <div style="width: 100%;padding-left: 16px;">
                    <span style="font-size: 11px; text-align: left;color: #8aabca;">
                    当前进度：    <dict-span
                      :type="DICT_TYPE.BIZ_EXPAND_PROCESS"
                      :value="item.expandProcess"
                    /></span>
                      <span  @click="openForm( item.id)" style="font-size: 11px;margin-left: 8px; text-align: left;color: #009dff;cursor: pointer">
                    查看详情</span>
                    </div>
                  </div>
                </div>
              </div>

            </div>
            <div v-else style="width: 100%;height: 100%">
              <div
                style=" background-color: rgba(255, 255, 255, 0.12);margin: 5px 10px; padding: 0px 10px; border-radius: 5px;">
                <span
                  style="font-size: 11px; color: #c0e4ff;line-height: 17px;display: grid; height: 20px;">
                  按新拓综合能力评分排名
                </span>
              </div>
              <div style="height: calc(100% - 6vh);width: 100%; overflow-y: auto">
                <div @click="handelShowRightDeteil(item)" class="right-table"
                     v-for="(item,i) in allUserExpand" :key="i">
                  <div class="right-table-item" style="display: flex;justify-content: left;">
                    <img :src="i == 0? no1: i == 1? no2:i == 2 ? no3: ''"
                         style="height: 17px;float: left; margin-left: -10px"/>
                    <span style="color:#fafafa;" v-if="i>2">{{ i }}</span>
                    <span class="right-table-item-name">
                  {{ item.user.nickname }}
                </span>
                  </div>
                  <div class="right-table-item">
                <span class="right-table-item-name2">
                  拜访户数
                </span>
                    <span class="right-table-item-value">
                  {{ item.expandRecordCountRespVO.bfkh }}
                </span>
                  </div>
                  <div class="right-table-item">
                <span class="right-table-item-name2">
                  拜访次数
                </span>
                    <span class="right-table-item-value">
                  {{ item.expandRecordCountRespVO.bfcs }}
                </span>
                  </div>
                  <div class="right-table-item">
                <span class="right-table-item-name2">
                  签约户数
                </span>
                    <span class="right-table-item-value">
                  {{ item.expandRecordCountRespVO.cgqy }}
                </span>
                  </div>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>
    <div style="width: 50px;height:100vh;float: left;">
      <img :src="dot_right_2" style="width: 6px; margin-top: 28vh; margin-left: 4.7vh;"/>
    </div>
    <Dialog
      v-model="showDialog"
      :title="dialogTitle"
      :width="'80%'"
      :close-on-esc="true"
      :lock-scroll="true"

    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="130px"
        v-loading="formLoading"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="受访人：" prop="interviewee">
              {{formData.interviewee}}
<!--              <el-input v-model="formData.interviewee" placeholder="请输入受访人" />-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="受访人电话：" prop="intervieweePhone">
              {{formData.intervieweePhone}}
<!--              <el-input v-model="formData.intervieweePhone" placeholder="请输入受访人电话" />-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="受访人职位：" prop="intervieweePosition">
              {{formData.intervieweePosition}}
<!--              <el-input v-model="formData.intervieweePosition" placeholder="请输入受访人职位" />-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户需求：" prop="customerRequire">
<!--              <el-input v-model="formData.customerRequire" placeholder="请输入客户需求" />-->
              {{formData.customerRequire}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="切入点：" prop="breakthroughPoint">
              <dict-span
                :type="DICT_TYPE.FOLLOW_UP_BERAKTHROUGH_POINT"
                :value="formData.breakthroughPoint"
              />
<!--              <el-select-->
<!--                v-model="formData.breakthroughPoint"-->
<!--                placeholder="请选择切入点"-->
<!--                class="w-1/1"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="dict in getStrDictOptions(DICT_TYPE.FOLLOW_UP_BERAKTHROUGH_POINT)"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拓展时间：" prop="expandTime">
              {{formatTime(formData.expandTime, 'yyyy-MM-dd')}}
<!--              <el-date-picker-->
<!--                v-model="formData.expandTime"-->
<!--                type="date"-->
<!--                value-format="x"-->
<!--                placeholder="选择拓展时间"-->
<!--                style="width: 100%"-->
<!--              />-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型：" prop="businessType">
              <dict-span
                :type="DICT_TYPE.BIZ_BUSINESS_TYPE"
                :value="formData.businessType"
              />
<!--              <el-select v-model="formData.businessType" placeholder="请选择业务类型" class="w-1/1">-->
<!--                <el-option-->
<!--                  v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_BUSINESS_TYPE)"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="拓展进度：" prop="expandProcess">
              <dict-span
                :type="DICT_TYPE.BIZ_EXPAND_PROCESS"
                :value="formData.expandProcess"
              />
<!--              <el-select v-model="formData.expandProcess" placeholder="请选择拓展进度" class="w-1/1">-->
<!--                <el-option-group-->
<!--                  v-for="group in ExpandProcessOptionsGroup"-->
<!--                  :key="group.label"-->
<!--                  :label="group.label"-->
<!--                >-->
<!--                  <el-option-->
<!--                    v-for="item in group.options"-->
<!--                    :key="item.value"-->
<!--                    :label="item.label"-->
<!--                    :value="item.value"-->
<!--                  />-->
<!--                </el-option-group>-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="增值业务：" prop="valueAddService" v-if="formData.businessType == '2'">
              <dict-span
                :type="DICT_TYPE.BIZ_VALUE_ADD_SERVICE"
                :value="formData.valueAddService"
              />
<!--              <el-select-->
<!--                v-model="formData.valueAddService"-->
<!--                placeholder="请选择增值业务"-->
<!--                class="w-1/1"-->
<!--              >-->
<!--                <el-option-->
<!--                  v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_VALUE_ADD_SERVICE)"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="拓展情况：" prop="expandSituation">
<!--              <el-input v-model="formData.expandSituation" placeholder="请输入拓展情况" />-->
              {{formData.expandSituation}}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户类型：" prop="customerType">
              <dict-span
                :type="DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE"
                :value="formData.customerType"
              />
<!--              <el-select v-model="formData.customerType" placeholder="请选择客户类型">-->
<!--                <el-option-->
<!--                  v-for="dict in getStrDictOptions(DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE)"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户级别：" prop="customerLevel">
              <dict-span
                :type="DICT_TYPE.CRM_CUSTOMER_LEVEL"
                :value="formData.customerLevel"
              />
<!--              <el-select v-model="formData.customerLevel" placeholder="请选择客户级别">-->
<!--                <el-option-->
<!--                  v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"-->
<!--                  :key="dict.value"-->
<!--                  :label="dict.label"-->
<!--                  :value="dict.value"-->
<!--                />-->
<!--              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="下次拜访时间：" prop="nextTimeVisit">
              {{formatTime(formData.nextTimeVisit, 'yyyy-MM-dd')}}

              <!--              <el-date-picker-->
<!--                v-model="formData.nextTimeVisit"-->
<!--                type="date"-->
<!--                value-format="x"-->
<!--                placeholder="选择下次拜访时间"-->
<!--                style="width: 100%"-->
<!--              />-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="现场图片：" prop="scenePictureUrl">
              <UploadImgs v-model="formData.scenePictureUrl" class="min-w-80px" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安全评测报告：" prop="securityReportUrl">
              <UploadFile v-model="formData.securityReportUrl" class="min-w-80px" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务方案附件：" prop="serviceSchemeUrl">
              <UploadFile v-model="formData.serviceSchemeUrl" class="min-w-80px" />
            </el-form-item>
          </el-col>
        </el-row>
<!--        <el-row>-->
<!--          <el-col :span="4">-->
<!--            <el-button style="margin-bottom: 20px">定位</el-button>-->
<!--          </el-col>-->
<!--          <el-col :span="10">-->
<!--            <el-form-item label="经度" prop="lng">-->
<!--              {{formData.lng }}-->
<!--&lt;!&ndash;              <el-input v-model="formData.lng" placeholder="请输入经度" />&ndash;&gt;-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="10">-->
<!--            <el-form-item label="纬度：" prop="lat">-->
<!--              {{ formData.lat}}-->
<!--&lt;!&ndash;              <el-input v-model="formData.lat" placeholder="请输入纬度" />&ndash;&gt;-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </el-form>
    </Dialog>
    <Dialog
      v-model="showDialog2"
      title="拓展记录清单"
      :width="'80%'"
      :close-on-esc="true"
      :lock-scroll="true"

    >
<!--      <ContentWrap>-->
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="88px"
      >
        <el-form-item label="受访人" prop="interviewee">
          <el-input
            v-model="queryParams.interviewee"
            placeholder="请输入受访人"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="受访人电话" prop="intervieweePhone">
          <el-input
            v-model="queryParams.intervieweePhone"
            placeholder="请输入受访人电话"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="拓展时间" prop="expandTime">
            <el-date-picker
              v-model="queryParams.expandTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-220px"
            />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
<!--          <el-button-->
<!--            type="primary"-->
<!--            plain-->
<!--            @click="openForm('create')"-->
<!--            v-hasPermi="['san:biz-expand-record:create']"-->
<!--          >-->
<!--            <Icon icon="ep:plus" class="mr-5px" /> 新增-->
<!--          </el-button>-->
          <el-button
            type="success"
            plain
            @click="handleExport"
            :loading="exportLoading"
            v-hasPermi="['san:biz-expand-record:export']"
          >
            <Icon icon="ep:download" class="mr-5px" /> 导出
          </el-button>
<!--          <el-button-->
<!--            type="danger"-->
<!--            plain-->
<!--            :disabled="isEmpty(checkedIds)"-->
<!--            @click="handleDeleteBatch"-->
<!--            v-hasPermi="['san:biz-expand-record:delete']"-->
<!--          >-->
<!--            <Icon icon="ep:delete" class="mr-5px" /> 批量删除-->
<!--          </el-button>-->
        </el-form-item>
      </el-form>
<!--      </ContentWrap>-->

      <!-- 列表 -->
<!--      <ContentWrap>-->
<!--      <el-table :data="tableData" style="width: 100%; height:300px">-->
<!--        <el-table-column prop="date" label="Date" width="180" />-->
<!--        <el-table-column prop="name" label="Name" width="180" />-->
<!--        <el-table-column prop="address" label="Address" />-->
<!--      </el-table>-->
      <table class="vue-table">
        <thead>
        <tr>
          <th v-for="(header, index) in headers" :key="index">
            {{ header.text }}
          </th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, rowIndex) in list" :key="rowIndex">
          <td v-for="(header, colIndex) in headers" :key="colIndex">
            <dict-span v-if="header.type == 'dict1'"
              :type="DICT_TYPE.CRM_CUSTOMER_LEVEL"
              :value="item[header.value]"
            />
            <dict-span v-else-if="header.type == 'dict2'"
                       :type="DICT_TYPE.BIZ_BUSINESS_TYPE"
                       :value="item[header.value]"
            />
            <dict-span v-else-if="header.type == 'dict3'"
                       :type="DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE"
                       :value="item[header.value]"
            />
            <dict-span v-else-if="header.type == 'dict4'"
                       :type="DICT_TYPE.CRM_CUSTOMER_LEVEL"
                       :value="item[header.value]"
            />
            <span v-else-if="header.type == 'time'">
             {{ dateFormatter(item[header.value]) }}
            </span>
            <span v-else>
               {{  item[header.value] }}
            </span>

          </td>
        </tr>
        </tbody>
      </table>
<!--        <el-table-->
<!--          row-key="id"-->
<!--          v-loading="loading"-->
<!--          :data="list"-->
<!--          :stripe="true"-->
<!--          :show-overflow-tooltip="true"-->
<!--          @selection-change="handleRowCheckboxChange"-->
<!--        >-->
<!--          <el-table-column type="selection" width="55" />-->
<!--          <el-table-column label="受访人" align="center" prop="interviewee" />-->
<!--          <el-table-column label="受访人电话" align="center" prop="intervieweePhone" />-->
<!--          <el-table-column label="受访人职位" align="center" prop="intervieweePosition" />-->
<!--          <el-table-column label="客户需求" align="center" prop="customerRequire" />-->
<!--          <el-table-column label="切入点" align="center" prop="breakthroughPoint">-->
<!--            <template #default="scope">-->
<!--              <dict-tag-->
<!--                :type="DICT_TYPE.FOLLOW_UP_BERAKTHROUGH_POINT"-->
<!--                :value="scope.row.breakthroughPoint"-->
<!--              />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="拓展时间"-->
<!--            align="center"-->
<!--            prop="expandTime"-->
<!--            :formatter="dateFormatter"-->
<!--            width="180px"-->
<!--          />-->
<!--          <el-table-column label="业务类型" align="center" prop="businessType">-->
<!--            <template #default="scope">-->
<!--              <dict-tag :type="DICT_TYPE.BIZ_BUSINESS_TYPE" :value="scope.row.businessType" />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="客户类型" align="center" prop="customerType">-->
<!--            <template #default="scope">-->
<!--              <dict-tag :type="DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE" :value="scope.row.customerType" />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column label="客户级别" align="center" prop="customerLevel">-->
<!--            <template #default="scope">-->
<!--              <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.customerLevel" />-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--            label="下次拜访时间"-->
<!--            align="center"-->
<!--            prop="nextTimeVisit"-->
<!--            :formatter="dateFormatter"-->
<!--            width="180px"-->
<!--          />-->
<!--          <el-table-column label="操作" align="center" min-width="120px">-->
<!--            <template #default="scope">-->
<!--              <el-button-->
<!--                link-->
<!--                type="primary"-->
<!--                @click="openForm('update', scope.row.id)"-->
<!--                v-hasPermi="['san:biz-expand-record:update']"-->
<!--              >-->
<!--                编辑-->
<!--              </el-button>-->
<!--              <el-button-->
<!--                link-->
<!--                type="danger"-->
<!--                @click="handleDelete(scope.row.id)"-->
<!--                v-hasPermi="['san:biz-expand-record:delete']"-->
<!--              >-->
<!--                删除-->
<!--              </el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
<!--        </el-table>-->
<!--        &lt;!&ndash; 分页 &ndash;&gt;-->
<!--        <Pagination-->
<!--          :total="total"-->
<!--          v-model:page="queryParams.pageNo"-->
<!--          v-model:limit="queryParams.pageSize"-->
<!--          @pagination="getList"-->
<!--        />-->
<!--      </ContentWrap>-->
    </Dialog>
  </div>

</template>

<script setup name="expand" lang="ts">
const headers = ref([
  { text: '受访人', value: 'interviewee' },
  { text: '受访人电话', value: 'intervieweePhone' },
  { text: '受访人职位', value: 'intervieweePhone' },
  { text: '客户需求', value: 'customerRequire' },
  { text: '切入点', value: 'breakthroughPoint', type: 'dict1' },
  { text: '拓展时间', value: 'expandTime',type: 'time' },
  { text: '业务类型', value: 'businessType', type: 'dict2' },
  { text: '客户类型', value: 'customerType', type: 'dict3' },
  { text: '客户级别', value: 'customerLevel', type: 'dict4' },
  { text: '下次拜访时间', value: 'nextTimeVisit' ,type: 'time'},
  { text: '操作', value: 'edit' },

])

const items = ref([
  { name: '张三', age: 28, occupation: '工程师' },
  { name: '李四', age: 32, occupation: '设计师' },
  { name: '王五', age: 45, occupation: '经理' }
])
// const tableData = ref([
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     address: 'No. 189, Grove St, Los Angeles',
//   },
// ]);

import {defineComponent,ref} from 'vue'
import { formatTime } from '@/utils'
import { isEmpty } from '@/utils/is'
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { ExpandRecordApi, ExpandRecord, ExpandProcessOptionsGroup } from '@/api/biz/expand/record'

import { DICT_TYPE, getIntDictOptions, getStrDictOptions  } from '@/utils/dict'
import {ElMessage, ElMessageBox} from 'element-plus'
import ExpandForm from './ExpandForm.vue'
import logo from '@/assets/imgs/screen/0221_portal.png';
import dot_left_2 from '@/assets/imgs/screen/dot_left_2.gif';
import dot_right_2 from '@/assets/imgs/screen/dot_right_2.gif';
import dot_left from '@/assets/imgs/screen/dot_left.gif';
import dot_right from '@/assets/imgs/screen/dot_right.gif';
import dot_flash from '@/assets/imgs/screen/dot_flash.gif';
import no1 from '@/assets/imgs/screen/no1.png';
import no2 from '@/assets/imgs/screen/no2.png';
import no3 from '@/assets/imgs/screen/no3.png';
import expMarker1 from '@/assets/imgs/screen/expMarker1.png';
import expMarker2 from '@/assets/imgs/screen/expMarker2.png';
import expMarker3 from '@/assets/imgs/screen/expMarker3.png';
import {CaretBottom, Back, ChatDotRound} from '@element-plus/icons-vue'
import Echart from '@/components/Echart/src/Echart.vue'
import {EChartsOption} from 'echarts'
// 引入中国地图数据
import china from '@/assets/map/json/china.json'
import echarts from '@/plugins/echarts'
import {loadBMap} from '@/utils/loadBMap';
import BaiduMap from '@/components/baiduMap/BaiduMap.vue';
import Dialog from './Dialog.vue';

// export default defineComponent({
//   name: 'expand.vue',
//   components: { Dialog },
//   setup() {
const showDialog = ref(false);
const showDialog2 = ref(false);

    // const confirmAction = (): void => {
    //   console.info('确认操作');
    //   showDialog.value = false;
    // };

    // return {
    //   showDialog,
    //   confirmAction
    // };
//   }
// });
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ExpandRecordApi.exportExpandRecord(queryParams)
    download.excel(data, '拓展记录.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: ExpandRecord[]) => {
  checkedIds.value = records.map((item) => item.id)
}
const dialogTitle = ref('')
/** 拓展记录 列表 */
defineOptions({ name: 'ExpandRecord' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const formLoading = ref(false) // 列表的加载中

const list = ref<ExpandRecord[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  interviewee: undefined,
  intervieweePhone: undefined,
  intervieweePosition: undefined,
  customerRequire: undefined,
  breakthroughPoint: undefined,
  expandTime: [],
  businessType: undefined,
  expandProcess: undefined,
  expandSituation: undefined,
  customerType: undefined,
  customerLevel: undefined,
  nextTimeVisit: undefined,
  scenePictureUrl: undefined,
  securityReportUrl: undefined,
  serviceSchemeUrl: undefined,
  createTime: [],
  ownerUserId: undefined
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.getExpandRecordPage(queryParams)
    list.value = data.list
    total.value = data.total
    showDialog2.value = true
    console.info(list)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}


// 注册地图
echarts?.registerMap('china', china as any)
const formRef = ref()
const formType = ref('') // 表单的类型：create - 新增；update - 修改

const  openForm = async ( id?: number) => {
  // formRef.value.open(type, id)
  console.info(id)
  dialogTitle.value = '拓展详情'
  formType.value = 'update'

  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ExpandRecordApi.getExpandRecord(id)
      console.info( formData.value)
      showDialog.value = true

    } finally {
      formLoading.value = false
      showDialog.value = true

    }
  }
}
const formData = ref({
  id: undefined,
  interviewee: undefined,
  intervieweePhone: undefined,
  intervieweePosition: undefined,
  customerRequire: undefined,
  breakthroughPoint: undefined,
  expandTime: undefined,
  businessType: undefined,
  expandProcess: undefined,
  expandSituation: undefined,
  customerType: undefined,
  customerLevel: undefined,
  nextTimeVisit: undefined,
  scenePictureUrl: undefined,
  securityReportUrl: undefined,
  serviceSchemeUrl: undefined,
  ownerUserId: undefined,
  lng: undefined,
  lat: undefined
})

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    interviewee: undefined,
    intervieweePhone: undefined,
    intervieweePosition: undefined,
    customerRequire: undefined,
    breakthroughPoint: undefined,
    expandTime: undefined,
    businessType: undefined,
    expandProcess: undefined,
    expandSituation: undefined,
    customerType: undefined,
    customerLevel: undefined,
    nextTimeVisit: undefined,
    scenePictureUrl: undefined,
    securityReportUrl: undefined,
    serviceSchemeUrl: undefined,
    ownerUserId: undefined,
    lng: undefined,
    lat: undefined
  }
  // formRef.value?.resetFields()
}

// 从环境变量获取AK
const bmapAk = import.meta.env.VITE_BAIDU_MAP_AK

const tranExpandProcessVal = ref('')
// onMounted(() => {
//   formatCTime();
// });
// const formatCTime = async (timestamp) =>
// {
//   const date = new Date(timestamp);
//
//   // return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
//   return `${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
// }
// 客户信息详情
const visitCustomer = ref(
  [
    {
      name: '拜访客户',
      value: '29',
      unit: '户'
    },
    {
      name: '成功签约',
      value: '2',
      unit: '户'
    },
    {
      name: '拜访/新拓',
      value: '45/15',
      unit: '次'
    },
    {
      name: '安全评测',
      value: '0',
      unit: '户'
    },
    {
      name: '收款跟踪',
      value: '2',
      unit: '次'
    },
    {
      name: '续签跟踪',
      value: '4',
      unit: '次'
    },
    {
      name: '关系维护',
      value: '13',
      unit: '次'
    },
    {
      name: '增值业务',
      value: '0',
      unit: '次'
    }
  ]
);


// 地图中心点
const mapCenter = ref({
  lng: 116.404,
  lat: 39.915
});

// 缩放级别
const zoomLevel = ref(15);
let showRightDeteil = ref(false);

// 标记点数据
const markerPoints = ref([
  {
    lng: 116.404,
    lat: 39.915,
    name: '天安门',
    icon: expMarker1
  },
  {
    lng: 116.41,
    lat: 39.92,
    name: '故宫博物院',
    icon: expMarker2
  },
  {
    lng: 116.39,
    lat: 39.91,
    name: '人民大会堂',
    icon: expMarker3

  }
]);

// return {
//   bmapAk,
//   mapCenter,
//   zoomLevel,
//   markerPoints
// };
const value1 = ref('')
const visitName = ref('')
const allUserExpand = ref([])
const expandRecordPage = ref([])


// const loading = ref(true) // 列表的加载中

function handelShowRightDeteil(item){
  visitName.value = item.user.nickname
  visitCustomer.value[0].value = item.expandRecordCountRespVO.bfkh
  visitCustomer.value[1].value = item.expandRecordCountRespVO.cgqy
  visitCustomer.value[2].value = item.expandRecordCountRespVO.bfcs + '/' +item.expandRecordCountRespVO.tx
  visitCustomer.value[3].value = item.expandRecordCountRespVO.aqpc
  visitCustomer.value[4].value = item.expandRecordCountRespVO.skgz
  visitCustomer.value[5].value = item.expandRecordCountRespVO.xygz
  visitCustomer.value[6].value = item.expandRecordCountRespVO.gxwh
  visitCustomer.value[7].value = item.expandRecordCountRespVO.zzyw
  getExpandRecordPage(item.user.id)
  loading.value = true
  showRightDeteil.value = true
}

/** 折线图配置 */
const echartsOption = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    // formatter: '{b} : {c} %',
    axisPointer: {
      lineStyle: {
        color: '#ffffff'
      }
    }
  },
  legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['拓展用户数', '拜访次数'],
    // right: '4%',
    top: '2%',
    textStyle: {
      fontSize: 10,
      color: '#F1F1F3'
    }
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true,
    backgroundColor: 'rgb(83, 137, 162,0)'
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: 'rgb(83, 137, 162)'
      }
    },
    axisLabel: {
      fontSize: 10,
      color: '#ffffff' // 设置x轴标签文字颜色为红色
    },
    data: ['2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09', '2025-10', '2025-11', '2025-12']
  }],
  yAxis: [{
    splitNumber: 3, // 建议分割段数
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#57617B'
      }
    },
    axisLabel: {
      margin: 10,
      formatter: '{value} ', // 设置 y 轴标签为百分比形式
      textStyle: {
        fontSize: 10,
        color: '#cae4ff'
      }
    },
    // splitLine: {
    //   lineStyle: {
    //     color: '#57617B'
    //   }
    // },
    splitArea: {
      show: false // 是否显示分隔区域
    },
    splitLine: {
      show: false, // 是否显示分隔线
      lineStyle: {
        type: "dashed",
        color: "#3c56ba"
      }
    },
  }],
  series:
    [
      {
        name: '拓展用户数',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(137,189,27)'
          }
        },
        data: [245, 234, 345, 567, 643, 456, 435]
      }, {
      name: '拜访次数',
      type: 'line',
      smooth: true,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      itemStyle: {
        normal: {
          color: 'rgb(0,136,212)'
        }
      },
      data: [352, 389, 567, 657, 664, 635, 700]
    }]
}) as EChartsOption

const echartsOption2 = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    // formatter: '{b} : {c} %',
    axisPointer: {
      lineStyle: {
        color: '#ffffff'
      }
    }
  },
  legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['本月新签合同'],
    // right: '4%',
    top: '2%',
    textStyle: {
      fontSize: 10,
      color: '#F1F1F3'
    }
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true,
    backgroundColor: 'rgb(83, 137, 162,0)'
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: 'rgb(83, 137, 162)'
      }
    },
    axisLabel: {
      fontSize: 10,
      color: '#ffffff' // 设置x轴标签文字颜色为红色
    },
    data: ['2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09', '2025-10', '2025-11', '2025-12']
  }],
  yAxis: [{
    splitNumber: 3, // 建议分割段数
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#57617B'
      }
    },
    axisLabel: {
      margin: 20,
      formatter: '{value} ', // 设置 y 轴标签为百分比形式
      textStyle: {
        fontSize: 10,
        color: '#cae4ff'
      }
    },
    // splitLine: {
    //   lineStyle: {
    //     color: '#57617B'
    //   }
    // },
    splitArea: {
      show: false // 是否显示分隔区域
    },
    splitLine: {
      show: false, // 是否显示分隔线
      lineStyle: {
        type: "dashed",
        color: "#3c56ba"
      }
    },
  }],
  series:
    [
      {
        name: '本月新签合同',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(0, 204, 255)'
          }
        },
        data: [5, 0, 19, 12, 11, 8, 6]
      },]
}) as EChartsOption

// 模拟数据 - 您需要替换为实际的地理坐标
const data = [
  {name: '汇置向西2期开湾', value: [123.4, 41.8]},
  {name: '水岸-3期', value: [123.38, 41.82]},
  {name: '辽宁大学北校区', value: [123.41, 41.92]},
  {name: '汇置尚都', value: [123.39, 41.85]},
  // 添加其他地点...
];

const echartsOptionMap = reactive<EChartsOption>({

  // 1
  title: {
    text: '客户分布地图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: params => {
      if (params.seriesType === 'scatter') {
        return `${params.data.name}`;
      }
      return params.name;
    }
  },
  visualMap: {
    min: 0,
    max: 100,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  geo: {
    map: 'china',
    roam: true, // 允许缩放和平移
    zoom: 1.2, // 初始缩放级别
    center: [116.4, 39.9], // 初始中心点(北京)
    label: {
      show: true
    },
    itemStyle: {
      areaColor: '#e6f7ff',
      borderColor: '#2973ad',
      borderWidth: 1
    },
    emphasis: {
      itemStyle: {
        areaColor: '#a7d8ff'
      }
    }
  },
  series: [
    {
      name: '客户分布',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: data,
      symbolSize: 12,
      encode: {
        value: 2
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: true
      },
      itemStyle: {
        color: '#d94e5d'
      },
      emphasis: {
        label: {
          show: true
        }
      }
    },
    {
      name: '热力图',
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: data,
      pointSize: 10,
      blurSize: 15
    }
  ]

  // 2
  // title: {
  //   text: '中国地图可视化',
  //   left: 'center',
  //   textStyle: {
  //     fontSize: 18
  //   }
  // },
  // tooltip: {
  //   trigger: 'item',
  //   formatter: '{b}: {c}'
  // },
  // visualMap: {
  //   type: 'piecewise',
  //   pieces: [
  //     { min: 1000 },
  //     { min: 500, max: 999 },
  //     { min: 100, max: 499 },
  //     { min: 0, max: 99 }
  //   ],
  //   color: ['#f44336', '#ff9800', '#4caf50', '#8bc34a'],
  //   left: 'left'
  // },
  // series: [
  //   {
  //     name: '数据示例',
  //     type: 'map',
  //     mapType: 'china',
  //     roam: true, // 允许缩放和平移
  //     label: {
  //       show: true,
  //       fontSize: 12
  //     },
  //     data: [
  //       { name: '北京', value: 1200 },
  //       { name: '上海', value: 1500 },
  //       { name: '广东', value: 1800 },
  //       { name: '江苏', value: 900 },
  //       { name: '浙江', value: 800 },
  //       { name: '四川', value: 600 },
  //       { name: '河南', value: 500 },
  //       { name: '河北', value: 300 },
  //       { name: '山东', value: 700 },
  //       { name: '湖南', value: 400 }
  //     ]
  //   }
  // ]

  // 3
  // tooltip: {
  //   trigger: 'item',
  //
  // },
  // visualMap: {
  //   text: ['高', '低'],
  //   realtime: false,
  //   calculable: true,
  //   top: 'middle',
  //   inRange: {
  //     color: ['#fff', '#3b82f6']
  //   }
  // },
  // series: [
  //   {
  //     name: '会员地域分布',
  //     type: 'map',
  //     map: 'china',
  //     roam: false,
  //     selectedMode: false,
  //     data: []
  //   }
  // ]
}) as EChartsOption


function getData() {


}
const getExpandRecordPage = async (id) => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.getExpandRecordCurrent(id)
    // allUserExpand.value = data
    expandRecordPage.value = data
      let options = [];
    ExpandProcessOptionsGroup.forEach((a) => {
      a.options.forEach((b) => {
        options.push(b)
      })
    })
    // console.info(expandRecordPage.value );
  } finally {
    loading.value = false
  }
}

getData();
/** 查询列表 */
const getAllList = async () => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.countAllUserExpand()
    data.sort((a, b) => b.expandRecordCountRespVO.bfkh - a.expandRecordCountRespVO.bfkh);
    allUserExpand.value = data
    // console.info(allUserExpand);
  } finally {
    loading.value = false
  }
}
/** 初始化 **/
onMounted(() => {
  getAllList()
  // getList()
})

</script>
<style scoped lang="scss">
.expendC1{
  background-color: rgb(73, 167, 228)
}
.expendC2{
  background-color: rgb(218, 136, 61)
}
.expendC3{
  background-color: rgb(9, 153, 71)
}
.right-detail-item-div-no {
  font-size: 14px;
  color: #fafafa
}

.right-detail-item-div-title {
  width: 100%;
  height: 20px;
  text-align: center
}

.right-detail-item {
  margin-top: 8px;
  float: left;
  width: 25%;
  height: 65px;
  padding: 0 4px;

}

.right-detail-item-div {
  justify-content: center;
  position: relative;
  display: grid;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.right-table:hover {
  background-color: rgb(57, 115, 162, 0.5);
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 2px;
  height: 12px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgba(159, 177, 204, 0.1);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #01c7bc;
  border-radius: 10px;
}

/* 滚动条滑块在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #1f58d7;
}

.left-table-item-i {
  color: #c0e4ff;
  margin-left: 3px;
  font-size: 11px;
}

.left-table-item-left {
  //text-align: left;
  //margin-left: 12px
}

.left-table-item2 {
  float: left;
  display: grid;
  width: 33%;
  margin-top: 12px;
  height: calc(100% - 12px);
  position: relative;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/imgs/screen/card-bg.png");
  background-size: 90% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.right-table-item-name2 {
  color: #c0e4ff;
  font-size: 12px;
}

.right-table-item-value {
  color: #ffffff;
  float: left;
  height: 18px;
  line-height: 16px;
  margin-left: 3px;
  font-size: 13px;
  text-align: center;
}

.right-table-item {
  width: 25%;
  height: 75%;
  float: left;
  display: grid;
  position: relative;
  justify-content: center;
  align-items: center;
}

.right-table-item-name {
  color: #ffffff;
  float: left;
  height: 18px;
  line-height: 16px;
  margin-left: 6px;
  font-weight: 500;
  font-size: 13px;
}

.right-table {
  cursor: pointer;
  height: 60px;
  margin-top: 4px;
  width: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/imgs/screen/right-bg.png");
  background-size: 78% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 30px;
}

.right-top {
  float: left;
  font-size: 10px;
  color: rgb(7, 210, 250);
  line-height: 4vh;
  cursor: pointer;
}

#expand {
  position: relative;
  justify-content: center;
  //align-items: center;
  height: 100vh;
  width: 100vw;
  background-image: url("../../assets/imgs/screen/expand_bg.jpg");
  background-size: 100vw 100vh;
}

.left-table1 {
  height: 16vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head1 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/work_left_1.png");
  background-size: 100%;
}

.left-body1 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/right-bg.png");
  background-size: 94%;
  background-position: center;
  background-repeat: no-repeat;
}

.left-table2 {
  margin-top: 12px;
  height: 24vh;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head2 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-left-1.png");
  background-size: 100%;
}

.left-body2 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
}

.left-table3 {
  margin-top: 12px;
  height: 25.5vh;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head3 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-left-2.png");
  background-size: 100%;
}

.left-body3 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
}

.left-table4 {
  height: 16vh;
  margin-top: 12px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head4 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-left-3.png");
  background-size: 100%;
}

.left-head5 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-right-1.png");
  background-size: 84%;
  background-repeat: no-repeat;
}

.left-body4 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/right-bg.png");
  background-size: 94%;
  background-position: center;
  background-repeat: no-repeat;
}

.left-table5 {
  height: calc(96vh - 84px);
  margin-top: 4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.right-button {
  float: right;
  padding: 5px;
  width: max-content;
  font-size: 10px;
  border: 1px solid #12528d;
  color: #c0e4ff;
  background-color: rgba(3, 41, 77, .8);
  cursor: pointer;
}
.vue-table {
  width: 100%;
  border-collapse: collapse;
}

.vue-table th, .vue-table td {
  border: 0px solid #ddd;
  padding: 8px;
  text-align: left;
}

.vue-table th {
  //background-color: #f2f2f2;
  position: sticky;
  top: 0;
}

.vue-table tr:nth-child(even) {
  //background-color: #f9f9f9;
}

.vue-table tr:hover {
  //background-color: #f1f1f1;
}
</style>
